<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车🐶</title>
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <style>
        table .web0225 input {width: 80px; height: 25px; float: left; border-radius: 15px; background: red; margin-bottom: 5px;color: #fff; cursor: pointer;}
        table .web0225 input:hover {color: yellow}
    </style>
</head>
<body>

    
    <div class="gwc" style=" margin:auto;">
        <table cellpadding="0" cellspacing="0" class="gwc_tb1">
            <tr>
                <td class="tb1_td1"><input type="checkbox"  id="allselect" /></td>
                <td class="tb1_td1">全选</td>
                <td class="tb1_td3">商品</td>
                <td class="tb1_td4">商品信息</td>
                <td class="tb1_td5">数量</td>
                <td class="tb1_td6">单价</td>
                <td class="tb1_td7">操作</td>
            </tr>
        </table>
        
        <table cellpadding="0" cellspacing="0" class="gwc_tb2">
            <tr>
                <td class="tb2_td1">
                    <input class="goodsInput" type="checkbox" value="1" name="newslist" id="newslist-1" />
                </td>
                <td class="tb2_td2"><a href="#"><img src="images/img1.jpg"/></a></td>
                <td class="tb2_td3"><a href="#">产品标题</a></td>
                <td class="tb1_td4">一件</td>
                <td class="tb1_td5">
                    <input class="delBtn" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
                    <input class="num" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" />
                    <input class="addBtn" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
                </td>
                <td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;">1.65</label></td>
                <td class="tb1_td7"><a href="javascript:void(0);"  class="del">删除</a></td>
            </tr>
            <tr>
                <td class="tb2_td1">
                    <input type="checkbox" class="goodsInput"  value="1" name="newslist" id="newslist-2" />
                </td>
                <td class="tb2_td2"><a href="#"><img src="images/img2.jpg"/></a></td>
                <td class="tb2_td3"><a href="#">产品标题</a></td>
                <td class="tb1_td4">一件</td>
                <td class="tb1_td5">
                    <input class="delBtn" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
                    <input class="num" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" />
                    <input class="addBtn" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
                </td>
                <td class="tb1_td6"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;">1.65</label></td>
                <td class="tb1_td7"><a href="javascript:void(0);"  class="del">删除</a></td>
            </tr>
        </table>
        
        <table cellpadding="0" cellspacing="0" class="gwc_tb3">
            <tr>
                <td class="tb1_td1 web0225">
                    <input type="button" value="添加商品" id='addGoods' />
                    <input type="button" value="复选框反选" id='fanselect' />
                    <!-- style="background-color:#ff5500;" -->
                </td>
                <td class="tb1_td1">&nbsp;</td>
                <td class="tb3_td1">&nbsp;</td>
                <td class="tb3_td2">已选商品 <label id="shuliang" style="color:#ff5500;font-size:14px; font-weight:bold;">0</label> 件</td>
                <td class="tb3_td3">合计(不含运费):<span>￥</span><span style=" color:#ff5500;"><label id="zong1" style="color:#ff5500;font-size:14px; font-weight:bold;">1.65</label></span></td>
                <td class="tb3_td4"><span id="jz1">结算</span><a href="#" style=" display:none;"  class="jz2" id="jz2">结算</a></td>
            </tr>
        </table>
    
    </div>
    
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>

<script>
    // 全选和全不选
    // 1-给【全选】checkbox绑定点击事件
    $('#allselect').click(function(){
            // 2-事件处理
        // 获取checkbox状态
        let status = $(this).prop('checked')
        // 获取所有商品input然后设置状态
        $('.goodsInput').prop('checked',status)
        totalFn()
    })

    // 反选
    // 1-给【反选】绑定点击事件
    $('#fanselect').click(function(){
        // 2-事件处理
        // 获取所有商品的input框  遍历-获取当前商品状态，取反
        $('.goodsInput').each((i,item) => {
            let status = $(item).prop('checked')
            $(item).prop('checked',!status)
        })
        totalFn()
    })

    // 添加商品
    // 1-获取【添加】按钮，绑定点击事件
    $('#addGoods').click(function(){
        // 2-追加标签
        $('table:eq(1) tbody').append(
            `
            <tr>
                <td class="tb2_td1">
                    <input class="goodsInput" type="checkbox" value="1" name="newslist" id="newslist-1" />
                </td>
                <td class="tb2_td2"><a href="#"><img src="images/img1.jpg"/></a></td>
                <td class="tb2_td3"><a href="#">产品标题</a></td>
                <td class="tb1_td4">一件</td>
                <td class="tb1_td5">
                    <input class="delBtn" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
                    <input class="num" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" />
                    <input class="addBtn" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
                </td>
                <td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;">1.65</label></td>
                <td class="tb1_td7"><a href="javascript:void(0);"  class="del">删除</a></td>
            </tr>
            `
        )
    })

    // 删除商品
    // 1-给【删除】绑定点击事件
    $('table:eq(1) tbody').on('click','.del',function(){
        // 2-找删除的父tr标签，并且remove
        $(this).parents('tr').remove()
        totalFn()
    })

    // 数量+
    // 商品+1
    // 事件委托+按钮绑定点击事件
    $("table:eq(1) tbody").on('click','.addBtn',function(){
        let num = $(this).prev().val()
            // 获取按钮前一个input框的数据，然后num++，然后改变值
        num++
        $(this).prev().val(num)
        totalFn()
    })



    // 数量-
    // 商品-1
    // 事件委托+按钮绑定点击事件
    // 获取input框数据，然后num--，然后改变值
    $("table:eq(1) tbody").on('click','.delBtn',function(){
        let num = $(this).next().val()
        // 用正则replaceAll替换非数字为空，改变值
        num--
        if(num<1)num=1
        $(this).next().val(num)

        totalFn()
    })

    // input值改变
    // 商品数量
    // 给input框绑定值改变事件，获取input框数据
    $("table:eq(1) tbody").on('input','.num',function(){
        let num = $(this).val()
        // 用正则replaceAll替换非数字为空，改变值
        num = String(num).replace(/\D/g,'')
        if(Number(num) < 1)num = 1
        $(this).val(num)
        totalFn()
    })
    // 统计
    // 计算总价函数
    function totalFn()
    {
        
        // 1-定义变量来存放总金额和总数量
        let totalPrice = 0
        let totalNumber = 0
        // 2-获取已勾选的商品,遍历-根据单价和数量来计算总金额和总数量
        $('.goodsInput:checked').each((i,item) => {
            let num = $(item).parents('tr').find('.num').val()
            let price = $(item).parents('tr').find('.tb1_td6 label').text()
            // console.log(price);
            totalNumber += parseInt(num)   
            totalPrice += parseInt(num) * (parseFloat(price)*100)
        })
        // 4-页面显示最新数据
        $('#shuliang').text(totalNumber)
        $('#zong1').text(totalPrice/100)
    }



</script>



</body>
</html>